<template>
    <div class="financial login register">
        <van-nav-bar :title="$t('financial.financial_in')" left-arrow @click-left="_return" fixed></van-nav-bar>
        <div class="financial-turn-out">
            <van-cell is-link @click.native="typeShow = true">
                <template slot="title">
                    <img :src="nowCoin.web+nowCoin.img" alt="">
                </template>
                <template>
                    <span>{{nowCoin.unit}}{{$t('financial.yu')}}</span>
                    <p>{{balance}}{{nowCoin.unit}}</p>
                </template>
            </van-cell>
            <van-cell is-link @click.native="typetimeShow = true" style="margin-top:10px">
                <template slot="title">
                    <van-icon name="clock-o" size="20" color="#666" />
                    <!-- <img :src="nowCoin.web+nowCoin.img" alt=""> -->
                </template>
                <template>
                    <span class="cossetimep" v-if="selecttime == ''">{{$t('info.chosetime')}}</span>
                    <!-- <span class="cossetimep" v-if="selecttime&&selecttime != '活期'">{{selecttime}}</span> -->
                    <span class="cossetimep" v-else>{{selecttime}}</span>
                    <!-- <p>{{balance}}{{nowCoin.unit}}</p> -->
                </template>
            </van-cell>
            <div class="financial-turn-out-inp">
                <p>{{ $t('financial.amount_out') }}（{{ nowCoin.unit }}）</p>
                <van-field v-model="turnPrice" :placeholder="$t('financial.in_notice')" type="number">
                    <p slot="button" size="mini" @click="turnPrice = balance">{{ $t('financial.all') }}</p>
                </van-field>
                <span>{{$t('financial.time_notice')}}</span>
            </div>
            <button class="btn" @click="submit" style="margin-top: 10px;height: 40px">{{$t('common.confirm')}}</button>
            <p class="tips" v-if="selecttime != ''">{{selecttime}}，年化收益率{{shouyi}}%</p>
        </div>

        <van-popup v-model="typeShow" position="bottom" :overlay="true">
            <van-picker show-toolbar :title="$t('info.coins')" :columns="columns" @cancel="onCancel" @confirm="onConfirm"/>
        </van-popup>

        <van-popup v-model="typetimeShow" position="bottom" :overlay="true">
            <van-picker show-toolbar :title="$t('info.time')" :columns="times" @cancel="ontimeCancel" @confirm="ontimeConfirm"/>
        </van-popup>

        <van-popup v-model="pwdShow" position="bottom" :overlay="true">
            <van-nav-bar :title="$t('pay.title')" leftArrow @click-left="pwdShow = false"/>
            <div class="pwdMain login">
                <van-cell-group>
                    <van-field v-model="payPassword" :placeholder="$t('pay.title')" input-align="center" type="password" maxlength="6"/>
                </van-cell-group>
                <p @click='forgetPwd'>{{$t('common.forget_password')}}？</p>
                <div class="btns">
                    <van-button type="info" @click="submitMove">{{$t('pay.button')}}</van-button>
                </div>
            </div>
        </van-popup>
        <loading v-if="loadingShow"></loading>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                coinPopupVisible:false,
                curTurnCoin:{},
                typeShow:false,
                columns:[],
                pwdShow:false,
                payPassword:'',
                nowCoin:{},
                turnPrice:'',
                balance:0,
                coinList:[],
                loadingShow:false,
                typetimeShow:false,
                times:[
                   
                ],
                selecttime:'',
                shouyi:'4.56',
                in_way_id:'',
            }
        },
        methods: {
            _return(){
                this.$emit('_return')
            },
            getCoins(){
                this.$api.get('index/getCoins')
                    .then(res =>{
                        this.columns = []
                        this.nowCoin = res.detail[0]
                        this.getPrice(this.nowCoin.name)
                        this.coinList = res.detail
                        res.detail.map(i => this.columns.push(i.unit))
                    })
            },
            onCancel(){
                this.typeShow = false
            },

            ontimeCancel(){
                this.typetimeShow= false
            },

            onConfirm(data){
                this.coinList.forEach(item =>{
                    if(item.unit === data){
                        this.nowCoin = item
                    }
                })
                this.onCancel()
                this.getPrice(data.toLowerCase())
            },

            ontimeConfirm(data){
                console.log(data)
                this.selecttime=data
                if(data=='活期'){
                    this.in_way_id=1
                }else if(data=='30天'){
                    this.in_way_id=2
                //    this.selecttime=data
                }else if(data=='60天'){
                    this.in_way_id=3
                    // this.selecttime=data
                }else{
                     this.in_way_id=4
                    // this.selecttime=data
                }
                this.ontimeCancel()
            },
            submitMove(){
                if(!this.payPassword){
                    this.$toast(this.$t('pay.title'))
                    return
                }
                let param = {
                    coin_name:this.nowCoin.name,
                    num:this.turnPrice,
                    paypassword:this.payPassword,
                    in_way_id:this.in_way_id
                }
                this.loadingShow = true
                this.$api.post('bi/toChangeInto',param)
                    .then(res =>{
                        this.loadingShow = false
                        this.$toast(res.message)
                        this._return()
                    })
            },
            forgetPwd(){
                this.$router.push({name:'safe',params:{mine:this.$route.path}})
            },
            getPrice(coin){
                this.times=[]
                this.$api.get('bi/getCoinAndBalance',{coin_name:coin})
                    .then(sour =>{
                        this.balance = sour.res.balance
                        sour.in_way.forEach(item => 
                        {
                            // if(item.level_type=='0'){
                            //     item.level_type='活期'
                            // }else{
                            //     item.level_type=item.level_type+'天'
                            // }
                             if(item.level_name=='活期'){
                                item.level_name='活期'
                            }else{
                                item.level_name=item.level_name.replace("期","");
                            }
                        this.times.push(item.level_name)})
                        console.log(this.times)
                    })
                 
            },
            submit(){
                if(!this.turnPrice){
                    this.$toast(this.$t('financial.out_notice'))
                    return
                }
                if(this.turnPrice <= 0){
                    this.$toast(this.$t('common.num'))
                    return
                }
                if(this.turnPrice > this.balance){
                    this.$toast(this.$t('common.max'))
                    return
                }
                this.pwdShow = true
            }
        },
        created() {
            this.getCoins()
        },
        mounted() {

        },
    }
</script>

<style lang="stylus" scoped>
    [class*=van-hairline]::after{
        border: none;
    }
    .van-cell:not(:last-child)::after{
        border none

    }

    .pwdMain{
        width: 96%;
        margin: 0 auto;
        .van-cell-group{
            border-top: 1px solid #ebedf0;
            border-bottom: 1px solid #ebedf0;
        }
        p{
            text-align: center;
            color: #26c196;
            font-size: 12px;
            margin-top: 10px;
        }
        .van-cell{
            background: #fff !important;
            color: #26c196;
            .van-cell__value{
                color: #FDDEB0;
            }
        }
        .btns{
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            margin-top: 170px;
            padding-bottom 15px
            .van-button{
                width: 100%;
                color: #000;
                background:linear-gradient(180deg, #54d8b4, #26c196);
                border: none;
                /*margin-left: 5%;*/
            }
        }
    }
    .cossetimep{
        color:#666 !important;
        font-size:14px !important
    }
    .financial {
        &-turn-out, &-turn-in, &-record-list {
            padding: 60px 15px;
        }
        &-turn-out, &-turn-in {
            .van-cell{
                background:#fff !important
                border 1px solid #ebebeb
                border-radius 5px
                align-items center
                line-height 14px
                .van-cell__title, .van-cell__value{
                    flex none
                }
                .van-cell__value{
                    width 85%
                    margin-left 5px
                    text-align left
                    span{
                        font-size 12px
                        color #D8D8D8
                        display block
                    }
                    p{
                        color #CBAF89
                        font-size 14px
                    }
                }
                .van-cell__title {
                    display flex
                    align-items center
                    width 30px!important
                    img{
                        width 30px
                    }
                }
            }
            &-info {
                background-color: #0E2764;
                padding: 12px 10px;
                display: flex;
                justify-content: space-between;

                &-wrap {
                    display: flex;
                    align-items: center;
                    img {
                        width: 30px;
                        height: 30px;
                        margin-right: 10px;
                    }
                }
                &-label {
                    font-size: 12px;
                    line-height: 16px;
                }
                &-value {
                    font-size: 14px;
                    color: #44CEFA;
                    line-height: 20px;
                }
            }
            &-inp {
                margin-top: 10px;
                background:#fff
                padding: 10px;
                font-size: 14px;
                border-radius 5px
                border 1px solid #ebebeb
                p{
                    color #D8D8D8
                }
                .van-field {
                    margin-top: 20px;
                    background-color: #fff !important;
                    border none
                    padding: 0;
                    border-bottom 1px solid rgba(255,255,255,0.1);
                    padding-bottom 15px
                    .van-button {
                        border: none;
                        background-color: #0E2764;
                        color: #44CEFA;
                        &:active::before {
                            background-color: #0E2764;
                        }
                    }
                }
                span{
                    color #D8D8D8
                    margin-top 10px
                    display inline-block
                }
            }
            &-btn {
                margin-top: 20px;
                border: none;
                background-color: #4BC5F9;
                width: 100%;
                height: 44px;
                border-radius: 22px;
                color: #fff;
            }
            .tips{margin-top:10px;color:#666}
        }
    }
</style>